<template>
  <div id="user-info">
    <a href="#" class="clear-fix">
      <slot name="user-icon">
        <svg class="privateImage-svg left">
          <use
            xmlns:xlink="http://www.w3.org/1999/xlink"
            xlink:href="#avatar-default"
          ></use>
        </svg>
      </slot>
      <div class="login-info left">
        <slot name="user-nickname">
          <!-- 这个div用来显示用户的信息 -->
          <div v-show="!isShow">{{ username }}</div>
          <div class="login" @click="logging" v-show="isShow">登录</div>
          <div class="regist" @click="regist" v-show="isShow">注册</div>
        </slot>
        <div class="phone">
          <slot name="user-phone">暂无绑定手机号</slot>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "UserInfo",
  data() {
    return {
      isShow: true
    };
  },
  computed: {
    ...mapGetters(["username"])
  },
  methods: {
    logging() {
      this.$login();
    },
    regist() {
      this.$regist()
    }
  },
  
  watch: {
    // 切换显示username或者登录注册按钮
    username(newValue) {
      if(newValue.length){
        this.isShow =false
      }
    }
  },
};
</script>

<style scoped>
#user-info {
  background-color: var(--color-tint);
  padding: 15px;
  margin-top: -5px;
}

#user-info .privateImage-svg {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 30px;
}

.left {
  float: left;
}

#user-info .login-info {
  color: #fff;
  margin: 10px 0 0 10px;
}

#user-info .login-info .phone {
  position: relative;
  font-size: 13px;
  margin-top: 5px;
  font-weight: 300;
}
.regist,
.login {
  display: inline-block;
  padding: 0 10px 2px 0;
}
</style>
